<template>
  <div class="hot">
    <!-- 为您推荐 -->
    <van-divider
      :style="{ color: '#000', borderColor: '#999', padding: '10px 16px 0px 16px' }"
    >
      <van-icon name="star-o" />
      为您推荐
    </van-divider>
    <!-- 推荐商品 -->
    <div class="recommend">
      <ul>
        <router-link
          class="li-recommend"
          tag="li"
          :to="{ path: `/detail/`, query: { id: d.id } }"
          v-for="d in datas"
          :key="d.id"
        >
          <img :src="d.image" />
          <p>{{ d.store_name }}</p>
          <p>￥{{ d.price }}</p>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datas: [],
    };
  },
  created() {
    this.axios.get("product/hot?page=1&limit=20").then((d) => {
      // console.log(d);
      this.datas = d;
    });
  },
};
</script>
<style lang="less" scoped>
.hot {
  // background-color: white;
  .van-divider {
    // background-color: white;
    margin: 0;
  }
  .recommend {
    ul {
      padding: 0px 15px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .li-recommend {
        background-color: white;
        width: 48%;
        margin-top: 10px;
        border-radius: 6px;
        overflow: hidden;
        img {
          width: 100%;
          height: 160px;
        }
        p {
          font-size: 14px;
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
          &:last-child {
            color: red;
          }
        }
      }
    }
  }
}
</style>